<!--
 * @Description:
 * @version:
 * @Author: 娃哈哈
 * @Date: 2024-12-21 21:05:37
-->
<script setup lang="ts">
import customTitle from '../index/components/customTitle.vue'
import leftBox from './leftSection/LeftBox.vue';
import leftWyfwqyqk from './leftSection/LeftWyfwqyqk.vue';
import rightBox from './rightSection/rightBox.vue'
import rightBox1 from './rightSection/rightBox1.vue'
import CenterMap  from './components/mapSection.vue'
import popupTitle from "./components/popupTitle.vue";
import areaJson from '../../utils/金凤区.json'
import { provide, ref, reactive } from 'vue';
import basicPopup from './components/basicPopup.vue'
import { PopupType } from '../index.d'
import basicTableComponents from './components/basicTableComponents.vue';
import popupInfo from './components/popupInfo.vue';
import enterpriseList from './popupSection/enterpriseList.vue'
import enterpriseView from './popupSection/enterpriseView.vue'
import activityView from './popupSection/activityView.vue'
import knowledgeList from './popupSection/knowledgeList.vue'
import timeAndTable from './leftSection/timeAndTable.vue'
import yearAndMonthAndDay from  './components/yearAndMonthAndDay.vue'
/**
 * 拖拽
 */
import { Directive, } from 'vue'
const vMove: Directive<any, void> = (el: HTMLElement) => {
  let moveElement = el.firstElementChild as HTMLElement
  function mouseDown(e: MouseEvent) {
    let X = e.clientX - el.offsetLeft
    let Y = e.clientY - el.offsetTop
    function mouseMove(e: MouseEvent) {
      el.style.left = e.clientX - X + 'px'
      el.style.top = e.clientY - Y + 'px'
    }
    document.addEventListener('mousemove', mouseMove)
    document.addEventListener('mouseup', () => {
      document.removeEventListener('mousemove', mouseMove)
    })
  }
  moveElement.addEventListener('mousedown', mouseDown)
}
// 打开弹窗事件  通过provide顶级注入  子组件通过inject接收
provide('showPopup', (data: {
    show: boolean;
    type: number,
    position?: { left: string },
    title?: string,
    isCenterLong?: boolean,
    container?: boolean,
    popupFlag?: string,
    searchInfo?:object
}) => {
  console.log('调用了爷爷兄弟的方法', data);
  const popup = popups.value.find((item) => item.type === data.type);
  if (!popup) return;
  console.log(popup);
  popup.show = data.show;
  if (data?.title) popup.title = data?.title as string;
  if (data?.isCenterLong) popup.isCenterLong = data?.isCenterLong as boolean || false;
    if (data?.container) popup.container = data?.container as boolean || false;
    if (data?.popupFlag) popup.popupFlag = data?.popupFlag as string || '';
    if (data?.searchInfo) popup.searchInfo = data?.searchInfo || '';
    if (data?.position) popup.position = data?.position;
});
const popups = ref<PopupType[]>([
  { show: false, type: 0, position: { left: '10%' }, title: '小区列表' },
  { show: false, type: 1, position: { left: '15%' }, title: '健康画像' },
  // 企业列表或者小区列表
  { show: false, type: 2, position: { left: '29%' }, title: '企业列表' },
  { show: false, type: 3, position: { left: '30%' }, title: '日常巡查' },
  { show: false, type: 4, position: { left: '32%' }, title: '指数说明' },
  { show: false, type: 5, position: { left: '49%' }, title: '企业详情' },
  { show: false, type: 6, position: { left: '53%' }, title: '案件列表' },
  { show: false, type: 7, position: { left: '66%' }, title: '督办清单' },
  { show: false, type: 8, position: { left: '50%' }, title: '餐厨垃圾运输', isCenterLong: true },
  { show: false, type: 9, position: { left: '42%' }, title: '共建共治工作机制' },
  { show: false, type: 10, position: { left: '50%' }, title: '督查详情', container: true },

  { show: false, type: 21, position: { left: '29%' }, title: '企业列表' },
  { show: false, type: 22, position: { left: '49%' }, title: '企业详情' },
  { show: false, type: 31, position: { left: '29%' }, title: '活动列表' },
  { show: false, type: 32, position: { left: '49%' }, title: '活动详情' },
  { show: false, type: 41, position: { left: '29%' }, title: '知识列表' },
]);

const columns = [
  {
    prop: 'name',
        label: '项目名称',
    width: '120'
  },
  {
      prop: 'address',
      label: '所在街道',
      width: '150'
  },
  {
      prop: 'grade',
      label: '物业服务等级',
      width: '110'
  },
  {
      prop: 'companyName',
      label: '企业名称',
      slot: 'tooltip',
  },
]
const tableData = [
    {
        name: '海珀兰轩三区',
        address: '金凤区长城花园A区',
        grade: '三级',
        companyName: '银川中房物业集团有限公司'
    },
    {
        name: '海珀兰轩三区',
        address: '金凤区长城花园A区',
        grade: '三级',
        companyName: '银川中房物业集团有限公司'
    },
    {
        name: '海珀兰轩三区',
        address: '金凤区长城花园A区',
        grade: '三级',
        companyName: '银川中房物业集团有限公司'
    },
    {
        name: '海珀兰轩三区',
        address: '金凤区长城花园A区',
        grade: '三级',
        companyName: '银川中房物业集团有限公司'
    },
    {
        name: '海珀兰轩三区',
        address: '金凤区长城花园A区',
        grade: '三级',
        companyName: '银川中房物业集团有限公司'
    },
    {
        name: '海珀兰轩三区',
        address: '金凤区长城花园A区',
        grade: '三级',
        companyName: '银川中房物业集团有限公司'
    },
    {
        name: '海珀兰轩三区',
        address: '金凤区长城花园A区',
        grade: '三级',
        companyName: '银川中房物业集团有限公司'
    },
    {
        name: '海珀兰轩三区',
        address: '金凤区长城花园A区',
        grade: '三级',
        companyName: '银川中房物业集团有限公司'
    },
    {
        name: '海珀兰轩三区',
        address: '金凤区长城花园A区',
        grade: '三级',
        companyName: '银川中房物业集团有限公司'
    },
    {
        name: '海珀兰轩三区',
        address: '金凤区长城花园A区',
        grade: '三级',
        companyName: '银川中房物业集团有限公司'
    },
    {
        name: '海珀兰轩三区',
        address: '金凤区长城花园A区',
        grade: '三级',
        companyName: '银川中房物业集团有限公司'
    },
    {
        name: '海珀兰轩三区',
        address: '金凤区长城花园A区',
        grade: '三级',
        companyName: '银川中房物业集团有限公司'
    },
    {
        name: '海珀兰轩三区',
        address: '金凤区长城花园A区',
        grade: '三级',
        companyName: '银川中房物业集团有限公司'
    },
    {
        name: '海珀兰轩三区',
        address: '金凤区长城花园A区',
        grade: '三级',
        companyName: '银川中房物业集团有限公司'
    },
    {
        name: '海珀兰轩三区',
        address: '金凤区长城花园A区',
        grade: '三级',
        companyName: '银川中房物业集团有限公司'
    },
    {
        name: '海珀兰轩三区',
        address: '金凤区长城花园A区',
        grade: '三级',
        companyName: '银川中房物业集团有限公司'
    },
    {
        name: '海珀兰轩三区',
        address: '金凤区长城花园A区',
        grade: '三级',
        companyName: '银川中房物业集团有限公司'
    }
]
/**
 * 表格行点击事件
 */
const rowClick = (data: { row: Record<string, any>, column: Record<string, any> }) => {
  console.log(data, '表格点击事件');
  popups.value[2].show = true;
  popups.value[2].popupFlag = 'table';
}

</script>

<template>
    <div class="index-box">
        <div class="contetn_left">
            <div class="box">
                <customTitle title="公司概况"></customTitle>
                <leftBox />
            </div>
            <img src="../../assets/img/line.png">
            <div class="wyfwqyqk">
                <customTitle title="经营产值"></customTitle>
                <leftWyfwqyqk />
            </div>
        </div>
        <div class="contetn_center">
            <!--<iframe src="http://111.51.73.76:8008/citygis/WidgetPages/WidgetGIS.html?debug=false&maptype=3d&code=city&devicetype=lg&themeid=Gis"></iframe>-->
            <CenterMap class="contetn_center_top" />
        </div>
        <div class="contetn_right">
            <div class="box RightModuleOne">
                <customTitle title="销售情况" />
                <rightBox />
            </div>
            <img src="../../assets/img/line.png">
            <div class="box RightModuleTwo">
                <customTitle title="其他" />
                <!-- <yearAndMonthAndDay/> -->
                <rightBox1 />
            </div>
        </div>
        <template v-for="(popup, index) in popups" :key="index">
            <basicPopup v-if="popup.show" :type="popup.type" :position="popup.position"
                :isCenterLong="popup.isCenterLong || false" :container="popup.container || false" :title="popup.title"
                @close="closePopup(index)">
                <template #default>
                    <template v-if="popup.popupFlag === 'mapPopup'">地图弹窗内容</template>
                    <template v-if="popup.popupFlag === 'table'">
                        <basicTableComponents :columns="columns" :data="tableData" @rowClick="rowClick">
                            <template #tooltip="{ row }">
                                <el-tooltip :content="row.companyName" placement="top">
                                    {{ row.companyName }}
                                </el-tooltip>
                            </template>
                        </basicTableComponents>
                    </template>
                    <template v-if="popup.popupFlag === 'info'">
                        <popupInfo />
                    </template>
                    <template v-if="popup.popupFlag === 'timeLength'">
                      <timeAndTable/>
                    </template>
                    <template v-if="popup.popupFlag === 'enterpriseList'">
                      <enterpriseList :params="popup.searchInfo"/>
                    </template>
                    <template v-if="popup.popupFlag === 'enterpriseView'">
                      <enterpriseView :params="popup.searchInfo"/>
                    </template>
                    <template v-if="popup.popupFlag === 'activityView'">
                      <activityView :params="popup.searchInfo"/>
                    </template>
                    <template v-if="popup.popupFlag === 'knowledgeList'">
                      <knowledgeList :params="popup.searchInfo"/>
                    </template>

                </template>
            </basicPopup>
        </template>
    </div>
</template>

<style scoped lang="less">

:deep( .el-table){
  background: transparent !important;
  font-family: '黑体';
  --el-table-border-color:transparent !important;
  --el-table-border:'none' !important;
  &::before {
    z-index: inherit;
  }
  tr{
    background-color: rgba(255,255,255,0) !important;
  }
  thead{
    background: url(/src/assets/img/tabTitle.png) no-repeat 50%;
    background-size: 100% 98%;
    tr th{
      background: transparent !important;
    }
  }
  .el-table__cell{
    padding: 0;
    border: none;
  }
  .el-table__row:hover>td {
    background-color: transparent !important;
  }
  .el-table__row--striped:hover{
    .el-table__cell{
      background-color: rgba(40, 85, 138, .2) !important;
    }
  }
  .el-table__row--striped{
    .el-table__cell{
      background-color: rgba(40, 85, 138, .2) !important;
    }
  }
  .cell{
    color: #c8deff;
    font-family: NotoSansCJKsc-Regular;
    line-height: 36px;
    font-size: 14px;
    white-space: nowrap;
    padding: 0;
  }

}


.index-box {
  font-family: YouSheBiaoTiHei-2;
  font-weight: 400 !important;
  box-sizing: border-box !important;
  width: 100%;
  display: flex;
  height: 100%;
  justify-content: space-between;
}
//左边 右边 结构一样
.contetn_left,
.contetn_right {
  display: flex;
  flex-direction: column;
  position: relative;
  width: 880px;
  box-sizing: border-box;
  flex-shrink: 0;
  height: 100%;
}
.contetn_left{
  z-index: 2;
  display: flex;
  flex-direction: row;
  background:
    linear-gradient(90deg, #0b0e17, rgba(11, 14, 23, 0.00392156862745098)),
    url('@/assets/img/left-img.png') no-repeat 20px -5px;
  background-size: 104% 104%;
  background-blend-mode: color-burn;
  .box {
    z-index: 2;
    width: 410px;
    height: 100%;
    text-align: center;
    overflow: hidden;
  }
  .wyfwqyqk {
    width: 400px;
    height: 100%;
  }
}
.contetn_right{
  justify-content: flex-end;
  display: flex;
  flex-direction: row;
  background:
    linear-gradient(270deg, #0b0e17, rgba(11, 14, 23, 0.00392156862745098)),
    url('@/assets/img/right-img.png') no-repeat -38px -5px;
  background-size: 104% 104%;
  background-blend-mode: color-burn;
  .box{
    z-index: 2;
    width: 410px;
    height: 100%;
    text-align: center;
    overflow: hidden;
  }
}
.contetn_center {
  //  flex: 1;
  //  margin: 0 54px;
  //  display: flex;
  //  flex-direction: column;
  //  justify-content: space-around;
  position: absolute;
  left: 0%;
  top: 0;
  padding: 18px 33px 20px 18px;
  width: inherit;
  transform: translateY(18px);
  transform: translate(0%, 18px);
  height: inherit;
  box-sizing: border-box;
  //width: 1338px;
  z-index: 0;
  //height: 638px;
  /* display: block; */
  width: inherit;
  height:  inherit;
  .contetn_center_top, iframe{
    display: block;
    width: 100%;
    height: 100%;
    filter: drop-shadow(5px 5px 10px #1b233a);
    box-shadow: inset 0 -70px 5px #1c243b, inset 0 -200px 100px #1b233a;
  }
  .contetn_center-bottom {
    height: 315px;
  }
}

.contetn_lr-item {
  height: 310px;
}
</style>
